<template>
  <div class="app-container" style="height: 100%;overflow: hidden;">
    <el-row :gutter="20" style="height: 100%;">
      <el-col :span="24" :xs="24" style="height:100%; overflow: auto;">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
          label-width="100px">
          <el-form-item label="存货编码" prop="code">
            <el-input v-model="queryParams.code" placeholder="请输入存货编码" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="产品名称" prop="name">
            <el-input v-model="queryParams.name" placeholder="请输入产品名称" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="产品型号" prop="model">
            <el-input v-model="queryParams.model" placeholder="请输入产品型号" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <!--<el-form-item label="产品型号明细" prop="brand">
            <el-input v-model="queryParams.brand" placeholder="请输入产品型号明细"
                      clearable @keyup.enter.native="handleQuery"/>
          </el-form-item>-->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
              v-if="queryParams.assessStatus === '0'" v-hasPermi="['develop:ProjectOrderInfo:add']">新增
            </el-button>
          </el-form-item>
        </el-form>

        <el-table border v-loading="loading"  :data="dataList" border stripe>
          <!-- <el-table-column type="selection" width="50" align="center"/> -->
          <el-table-column label="存货编码" align="center" key="code" prop="code"  />
          <el-table-column label="产品名称" align="center" key="name" prop="name" :show-overflow-tooltip="true"  />
          <el-table-column label="产品型号" align="center" key="model" prop="model" :show-overflow-tooltip="true"
             />
          <el-table-column label="计量单位" align="center" key="unit" prop="unit" :show-overflow-tooltip="true"  />

          <el-table-column label="创建时间" align="center" prop="createTime" width="160" :show-overflow-tooltip="true" >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
            <template slot-scope="scope">

              <el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.assessStatus ==='2'"
                @click="handleUpdate(scope.row)">修改</el-button>

              <el-popconfirm :title="`确认通过 `+scope.row.name+` 数据项？`" v-if="scope.row.assessStatus === '0'"
                @confirm="handleAssess(scope.row,'1')" style="margin-left: 10px;">
                <el-button slot="reference" size="mini" type="text" icon="el-icon-check">通过
                </el-button>
              </el-popconfirm>
              <el-popconfirm :title="`确认不通过 `+scope.row.name+` 数据项？`" v-if="scope.row.assessStatus === '0'"
                @confirm="handleAssess(scope.row,'2')" style="margin-left: 10px;">
                <el-button slot="reference" size="mini" type="text" icon="el-icon-close">不通过
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </el-col>
    </el-row>



    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="80%" :close-on-click-modal="false" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品分类" prop="deptId">
              <treeselect v-model="form.deptId" :options="deptOptions" placeholder="请选择产品分类" @select="selectArea"
                style="width:240px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="存货编码" prop="code">
              <el-input v-model="form.code" placeholder="请输入存货编码" maxlength="30" disabled />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入产品名称" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品型号" prop="model">
              <el-input v-model="form.model" placeholder="请输入产品型号" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="计量单位" prop="unit">
              <el-input v-model="form.unit" placeholder="请输入计量单位" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品类别" prop="type">
              <el-radio-group v-model="form.type">
                <el-radio v-for="dict in dict.type.goods_type" :key="dict.value" :label="dict.value">{{ dict.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>






  </div>
</template>

<script>
  import {
    listGoodsOrderIn,
    updateGoodsOrderIn,
    delGoodsOrderIn,
    goodsOrderInAdd,
    goodsOrderInUpdate
  } from "@/api/sysArea/area";
  import {
    listByLazyTree
  } from "@/api/sysArea/area";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {
    getAction, updateAction
  } from "@/api/manage";

  export default {
    name: "GoodsOrderInAssessList",
    dicts: ["goods_type"],
    components: {
      Treeselect,
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        dataList: null,
        // 弹出层标题
        title: "",
        // 部门树选项
        deptOptions: [],
        // 是否显示弹出层
        open: false,
        // 部门名称
        deptName: null,
        // 日期范围
        dateRange: [],
        deptId: null,
        // 查询参数
        form: {},
        url:{
          list: '/goodsOrderIn/goodsOrderIn/assessList',
          assess: '/goodsOrderIn/goodsOrderIn/assess',
          remove: '/goodsOrderIn/goodsOrderIn/',
        },
        rules: {
          code: [{
            required: true,
            message: "存货编码不能为空",
            trigger: "blur"
          }],
          name: [{
            required: true,
            message: "产品名称不能为空",
            trigger: "blur"
          }],
          deptId: [{
            required: true,
            message: "请选择产品分类",
            trigger: "blur"
          }],
          model: [{
            required: true,
            message: "规格型号不能为空",
            trigger: "blur"
          }],
          unit: [{
            required: true,
            message: "计量单位不能为空",
            trigger: "blur"
          }],
          type: [{
            required: true,
            message: "请选择产品类别",
            trigger: "blur"
          }],
        },
        queryParams: {
          pageNum: 1,
          pageSize: 20,
          userName: undefined,
          phonenumber: undefined,
          status: undefined,
          mainId: undefined,
          deptId: undefined,
          code: undefined,
          name: undefined,
          model: undefined,
          brand: undefined,
          orderByColumn:'createTime',
          isAsc:'desc',
        },

      };
    },
    watch: {
      // 根据名称筛选部门树
      deptName(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() {
      let that = this;
      that.queryParams.assessStatus = that.$route.query.assessStatus;
      that.queryParams.delFlag = that.$route.query.delFlag;
      this.getList();
      this.getTreeselect();
    },
    methods: {
      getList() {
        this.loading = true;
        getAction(this.url.list, this.queryParams).then(response => {
          this.dataList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        listByLazyTree().then(response => {
          this.deptOptions = response.data;
        });
      },

      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          name: null,
          code: null,
          brand: null,
          model: null,
          unit: null,
          deptId: null,
          deptName: null,
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },

      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.form.deptId = this.deptId;
        this.title = "添加产品";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        this.form = row;
        this.open = true;
        this.title = "修改产品";
      },

      /** 审核按钮操作 */
      handleAssess(row, assessStatus) {
        this.form.id = row.id;
        this.form.assessStatus = assessStatus;
        let that = this;
        updateAction(that.url.assess, that.form).then(response => {
          that.$modal.msgSuccess("修改成功");
          that.open = false;
          that.getList();
        });
      },

      selectArea(e) {
        getAction("/goodsOrderIn/goodsOrderIn/getGoodsCodeByArea", {
          deptId: e.id
        }).then(response => {
          this.form.code = response.data.code;
          this.code = response.data.code;
        });
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != undefined) {
              this.form.assessStatus = "0";
              goodsOrderInUpdate(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              goodsOrderInAdd(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },







    }
  };
</script>

<style lang="scss">
</style>
